const path = require('path')
// 引入插件
const htmlWebpackPlugin = require('html-webpack-plugin');

// /path  /src/main.js = /path/src/main.js
// /path/  /src/main.js = /path//src/main.js

console.log("************************************************");
console.log(path.resolve(__dirname, "src/main.js"));
//ｎｏｄｅ的导出
// webpack 的配置写在这个位置
module.exports = {
    // path.resolve这个api可以帮我们解析和拼接路径，并且会帮我们抹平平台差异 
    // entry: path.resolve(__dirname,"src/main.js"),
    // 配置多个入口文件
    entry: {
        // key就是入口的名字
        main: path.resolve(__dirname, "src/main.js"),
        bundle: path.resolve(__dirname, "src/js/business.js")
    },
    output: {
        // 打包生成文件的目录
        path: path.resolve(__dirname, "dist"),
        filename: '[name].js'
    },
    //webpack-dev-server的配置
    devServer: {
        port: 5000,
        // contentBase: 'src',
        hot: true,
        open: true
    },
    plugins: [
        // 1. 把文件放到内存里，可以直接通过域名加文件名访问到它
        // 2. 在这个html中引入打包好的脚本
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),
            filename: 'index.html'
        })
    ],
    module: {
        rules: [{
            test: /\.css$/,
            use: ['style-loader', 'css-loader']
        }, {
            test: /\.less$/,
            use: ['style-loader', 'css-loader', 'less-loader']
        }, {
            test: /\.scss$/,
            use: ['style-loader', 'css-loader', 'sass-loader']
        }, {
            test: /\.(jpg|png|gif|bmp|svg)$/,
            use: 'url-loader?limit=6000&name=[hash:8]-[name].[ext]'
        }, {
            test: /\.(woff|woff2|eot|ttf)$/,
            use: 'url-loader?limit=1000&name=[hash:8]-[name].[ext]'
        }, {
            test: /\.js$/,
            // node_modules 下的文件不编译
            exclude: /(node_modules|bower_components)/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/preset-env']
                }
            }
        }]
    }
}